<template>
	<!-- 章节强化选章节 -->
	<view class="content base-con-bg">
		<nav-bar :isback="true" @back="pageBack" @cutClick="cutClick" leftType="6" :leftText="$store.getters.getKeMuName" bgColor="#FFE8CA"></nav-bar>
		<scroll-view scroll-x="true" class="scroll-y" @scrolltoupper="upper"
			:show-scrollbar="false"
			@scrolltolower="lower" @scroll="scroll" :scroll-left="scrollLeft">
			<view class="scroll-list">
				<view @tap="tabItemClick(item,index)" class="item" :class="{'on': index===tabIndex}" v-for="(item,index) in deptByListNew" :key="index">{{item.n}}</view>
			</view>
		</scroll-view>
		<view class="chapter">
			<view class="chapter-list">
				<view class="item" v-for="(item,index) in deptByListNew[tabIndex]?.s" :key="index" @click="itemClick(item,index)" :class="getItemClass(item)">
					<view class="left">
						<view v-if="item?.charInfo?.passRate>=70" class="iconfont icon-duigou"></view>
						<view v-else class="iconfont icon-fanhui"></view>
						</view>
					<view class="info">
						<view class="text">第{{$common.numberToChinese(index+1)}}章	{{item.n}}</view>
						<view v-if="item?.charInfo?.lastCharacter=='1'" class="get-on-with">继续做</view>
					</view>
					<view class="right">
						<view v-if="item?.charInfo?.passRate" class="pass-rate">
							预测通过率
							<view class="num">{{getRate(item)}}%</view>
						</view>
						<view class="plan">
							<view>{{item?.charInfo?.rightNum || 0}}/{{item?.num}}</view>
							<view class="line-bg"><view class="line" :style="{width: (item?.charInfo?.rightNum || 0)+'%'}"></view></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getPracticeInfoByChar} from '@/api/index.js'
	export default {
		components: {
			
		},
		data() {
			return {
				tabIndex: 0,
				scrollLeft: 0,
				deptByListNew: [],
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.getPracticeInfoByChar()
		},
		watch: {
			DEPTBYKEMULIST: {
				handler(newVal){
					if(newVal){
						this.getPracticeInfoByChar()
					}
				},
				deep: true
			}
		},
		computed: {
			DEPTBYKEMULIST() {
				return this.$store.state.DEPTBYKEMULIST;
			},
		},
		methods: {
			scroll(){
				
			},
			upper(){
				
			},
			lower(){
				
			},
			getRate(item){
				return item?.charInfo.passRate || 0
			},
			getPracticeInfoByChar(){
				if(this.DEPTBYKEMULIST?.length>0){
					this.deptByListNew= JSON.parse(JSON.stringify(this.DEPTBYKEMULIST));
					const pid2List = this.deptByListNew[this.tabIndex]?.s
						.flatMap(item=> item.v).filter(value=> value !=null);
					console.log(pid2List,777)
					getPracticeInfoByChar({
						pid2ListStr: pid2List.toString(),
					}).then(res=>{
						const idMap = new Map();
						for (let fitem of res.data) {
							idMap.set(fitem.pid2, fitem);
						}
						for (let ditem of this.deptByListNew[this.tabIndex]?.s) {
							if (idMap.has(ditem.v)) {
								ditem.charInfo = idMap.get(ditem.v);
							}
						}
					})
				}
			},
			cutClick(){
				uni.navigateTo({
					url: `/pages/cutDrawer/index`
				})
			},
			tabItemClick(item,index){
				this.tabIndex=index;
				this.getPracticeInfoByChar();
			},
			itemClick(item,index){
				uni.navigateTo({
					url: `/pagesA/aiAccuracy/index?type=2&id=${item.v}`
				})
			},
			getItemClass(item){
				const rate= item?.charInfo?.passRate;
				if(!rate){
					return ''
				}
				if(rate>=70){
					return 'pass'
				}else if(rate<20){
					return 'continue'
				}else if(rate<70){
					return 'no-pass'
				}
			},
			pageBack(){
				console.log(2342)
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-y{
		border-bottom: 2rpx solid #F8F8F8;
	}
	.scroll-list{
		display: flex;
		padding: 28rpx 22rpx;
		font-size: 28rpx;
		color: #666;
		.item{
			margin-right: 26rpx;
			padding: 6rpx 14rpx;
			white-space: nowrap;
			background-color: #fff;
			border-radius: 26rpx;
			&:last-child{
				// padding-right: 50rpx;
			}
			&.on{
				color: #fff;
				background-color: #FF9813;
			}
		}
	}
	.chapter{
		
	}
	.title{
		height: 66rpx;
		padding: 0 36rpx;
		line-height: 66rpx;
		font-size: 28rpx;
		color: #444;
		background-color: #F8F8F8;
	}
	.chapter-list{
		.item{
			display: flex;
			align-items: center;
			height: 92rpx;
			padding: 0 12rpx 0 36rpx;
			border-bottom: 2rpx solid #F8F8F8;
			.left,.right{
				flex-shrink: 0;
			}
			.left{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
				border-radius: 50%;
				background-color: #E0E0E0;
				.iconfont{
					font-size: 12rpx;
					color: #fff;
				}
				.icon-fanhui{
					transform: rotate(180deg);
				}
			}
			.info{
				display: flex;
				flex: 1;
				overflow: hidden;
				height: 100%;
				align-items: center;
				padding-right: 30rpx;
				font-size: 28rpx;
				color: #333;
				.text{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.get-on-with{
					flex-shrink: 0;
					width: 68rpx;
					height: 28rpx;
					line-height: 28rpx;
					transform: translateY(-26rpx);
					font-size: 16rpx;
					color: #FF9813;
					text-align: center;
					background-color: #FFEFDB;
					border-radius: 10rpx 10rpx 10rpx 0rpx;
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
				text-align: right;
				.pass-rate{
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					font-size: 14rpx;
					color: #FF9813;
				}
				.num{
					width: 44rpx;
					height: 22rpx;
					margin-left: 10rpx;
					line-height: 22rpx;
					text-align: center;
					color: #fff;
					background-color: #FF9813;
					border-radius: 10rpx;
				}
				.plan{
					font-size: 16rpx;
					color: #626262;
				}
				.line-bg,.line{
					border-radius: 4rpx;
				}
				.line-bg{
					position: relative;
					width: 90rpx;
					height: 8rpx;
					background-color: #EFEFEF;
					overflow: hidden;
				}
				.line{
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					background-color: #FF9813;
				}
			}
			&.continue{
				.left{
					background-color: #FF9813;
				}
			}
			&.pass{
				.left,.right .num,.right .line{
					background-color: #48CA8C;
				}
				.right .pass-rate{
					color: #48CA8C;
				}
			}
			&.no-pass{
				.left,.right .num,.right .line{
					background-color: #FFCE8F;
				}
				.right .pass-rate{
					color: #FFCE8F;
				}
			}
		}
	}
</style>
